import { IFormProps, getUserName, appName } from "../utils/common";
import React from "react";
import { connect } from 'dva';
import { Form, Row, Col, Icon, Input, Button, Checkbox } from 'antd';
import Vcode from 'react-vcode';
import { FormComponentProps } from "antd/lib/form/Form";
const Styles = require("../styles/login.less");
//import Styles from '../styles/login.less';

export interface ILoginProps extends IFormProps {
    user: any
}
class Login extends React.PureComponent<ILoginProps, any>{
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.props.dispatch!({
            type: 'user/clear',
        });
    }

    submit = (e: any) => {
        e.preventDefault();
        this.props.form.validateFields((err, form) => {
            if (!err) {
                this.props.dispatch!({
                    type: 'user/login',
                    payload: {
                        form,
                        callback: (successd) => {
                            if (successd) {
                                this.props.history.push('/');
                            }
                            else {
                                this.props.form.setFieldsValue({ code: '', password: '' });
                                let vcode = document.getElementById('v_code');
                                vcode && vcode.click();
                            }
                        }
                    }
                });
            }
        });
    }

    checkCode = (rule, value, callback) => {
        if (value) {
            if (value == this.state!.code) {
                callback();
                return;
            }
            else if (value.length >= this.state!.code.length) {
                callback('验证码不正确');
                return;
            }
        }
        else {
            callback('请输入验证码');
        }
        return;
    }

    render(): JSX.Element {
        const { getFieldDecorator } = this.props.form;
        const formItemCol = {
            labelCol: { span: 5 },
            wrapperCol: { span: 19 }
        };
        return (
            <div style={{ width: '100%', height: '100%' }}>
                <Row type='flex' justify='center' align='middle' className={Styles.loginBg} >
                    <Row className={Styles.loginPannel} type='flex' justify='center' align='middle'>
                        <Row type='flex' className={Styles.loginContainer}>
                            <Row type='flex' className={Styles.main}>
                                <div className={Styles.loginWarp}>
                                    <div className={Styles.loginH4d}>
                                        <h4 className={Styles.loginH4}>{appName}</h4>
                                    </div>
                                    <Form onSubmit={this.submit}>
                                        <Form.Item
                                            label='用户名' {...formItemCol}
                                        >
                                            {getFieldDecorator('userName', {
                                                rules: [{
                                                    required: true, message: '请输入用户名'
                                                }],
                                            })(
                                                <Input prefix={<Icon type='user' />} placeholder="请输入用户名" />
                                            )}
                                        </Form.Item>
                                        <Form.Item
                                            label='密码'
                                            {...formItemCol}
                                        >
                                            {getFieldDecorator('password', {
                                                rules: [{
                                                    required: true, message: '请输入密码'
                                                }],
                                            })(
                                                <Input type='password' prefix={<Icon type='lock' />} placeholder="请输入密码" />
                                            )}
                                        </Form.Item>
                                        <Form.Item
                                            label='验证码'
                                            {...formItemCol}
                                        >
                                            <Row>
                                                <Col span={12}>
                                                    {getFieldDecorator('code', {
                                                        rules: [{
                                                            validator: this.checkCode
                                                        }],
                                                    })(
                                                        <Input prefix={<Icon type='question-circle-o' />} placeholder='请输入验证码' />
                                                    )}
                                                </Col>
                                                <Col span={6}>
                                                    <Vcode id='v_code' style={{ marginLeft: 10 }} width={100} height={32} onChange={(code) => { this.setState({ code }) }} />
                                                </Col>
                                            </Row>
                                        </Form.Item>
                                        <Form.Item
                                            {...formItemCol}
                                            wrapperCol={{ offset: 5 }}
                                        >
                                            <Button type="primary" htmlType="submit" loading={this.props.loading} style={{ width: '100%' }} >
                                                登录
                                            </Button>
                                        </Form.Item>
                                    </Form>
                                </div>
                            </Row>
                        </Row>
                    </Row>
                </Row>
            </div>
        );
    }
}

export default connect(({ user, loading: { models: { user: loading } } }) => ({ user, loading }))(Form.create()(Login));